﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Personality Test</title>
<style>
body {
  font-family: "Lucida Console";
  margin: 0px
}

header {
  background: black;
  color: white;
  margin: 0px;
  padding: 20px;
  font-size: smaller;
}

header h1 {
  margin: 0px;
}

header p {
  margin: 0px;
  font-size: large;
}

.score {
  margin: 25px;
}

.score h2 {
  font-weight: normal;
  margin-bottom: 5px;
  font-size: 18px;

}

canvas {
  border-radius: 15px;
  background: #FFF8DC;
}

img {
  visibility: hidden;
}
</style>
<script>


window.onload = function() {
  var extraversion = Number(getQueryVariable("e"));
  var accommodation = Number(getQueryVariable("a"));
  var conscientiousness = Number(getQueryVariable("c"));
  var neuroticism = Number(getQueryVariable("n"));
  var openness = Number(getQueryVariable("o"));

  // Show the score numbers.
  document.getElementById("headingE").innerHTML += extraversion;
  document.getElementById("headingA").innerHTML += accommodation;
  document.getElementById("headingC").innerHTML += conscientiousness;
  document.getElementById("headingN").innerHTML += neuroticism;
  document.getElementById("headingO").innerHTML += openness;

  // Draw the scores.
  plotScore(document.getElementById("canvasE"), extraversion, "Extraversion");
  plotScore(document.getElementById("canvasA"), accommodation, "Accommodation");
  plotScore(document.getElementById("canvasC"), conscientiousness, "Conscientiousness");
  plotScore(document.getElementById("canvasN"), neuroticism, "Neuroticism");
  plotScore(document.getElementById("canvasO"), openness, "Openness");
};

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
}

function plotScore(canvas, score, title)
{
  var context = canvas.getContext("2d");

  // Draw the arrows on the side of the chart line.
  var img = document.getElementById("arrow_left");
  context.drawImage(img, 12, 10);
  img = document.getElementById("arrow_right");
  context.drawImage(img, 498, 10);

  // Draw the line between the arrows.
  context.moveTo(39,25);
  context.lineTo(503,25);
  context.lineWidth = 10;
  context.strokeStyle = "rgb(174,215,244)";
  context.stroke();

  // Write the numbers on the scale.
  context.fillStyle = context.strokeStyle;
  context.font = "italic bold 18px Arial";
  context.textBaseline = 'top';

  context.fillText("-20", 35, 50);
  context.fillText("0", 255, 50);
  context.fillText("20", 475, 50);

  // Add the star to show where the score ranks on the chart.
  img = document.getElementById("star");
  context.drawImage(img, (score+20)/40*440+35-17, 0);
}

</script>
</head>

<body>
  <header>
    <h1>Five Factor Personality Test</h1>
    <p>The Results</p>
  </header>

  <div class="score">
    <h2 id="headingE">Extraversion: </h2>
    <canvas id="canvasE" height="75" width="550"></canvas>
  </div>

  <div class="score">
    <h2 id="headingA">Accommodation: </h2>
    <canvas id="canvasA" height="75" width="550"></canvas> 
  </div>

  <div class="score">
    <h2 id="headingC">Conscientiousness: </h2>
    <canvas id="canvasC" height="75" width="550"></canvas> 
  </div>

  <div class="score">
    <h2 id="headingN">Neuroticism: </h2>
    <canvas id="canvasN" height="75" width="550"></canvas>
  </div>

  <div class="score">
    <h2 id="headingO">Openness: </h2>
    <canvas id="canvasO" height="75" width="550"></canvas>
  </div>


<img id="arrow_left" src="arrow_left.png">
<img id="arrow_right" src="arrow_right.png">
<img id="star" src="star.png">
</body>
</html>
